import PropTypes from 'prop-types'
import { createStore, applyMiddleware, compose } from './miniRedux'
import { thunk, arrayThunk } from './miniRedux-thunk'
import { Provider, connect } from './miniReact-redux'
//reducer
function tool(state = {num: 0}, action){
    switch (action.type){
        case '+':
            return { ...state, num: state.num + 1 }
        case '-':
            return { ...state, num: state.num - 1 }
        default:
            return {num: 0}
    }
}
const toolStore = createStore(tool, applyMiddleware([thunk, arrayThunk]))
function addTool(){
    return { type: '+' }
}
function subTool(){
    return { type: '-' }
}
function delaySubmit(time){
    return dispatch => {
        setTimeout(() => {
            dispatch({type: '+'})
        },time)
    }
}
function addTwice(){
    return [addTool(), delaySubmit(1000)]
}
@connect(
    state => state,
    { addTool, subTool, delaySubmit, addTwice }
)
class App extends React.Component{
    render(){
        return (
            <div>
                <h1>当前有{this.props.num}把武器</h1>
                <button onClick={this.props.addTool}>新增</button>
                <button onClick={this.props.subTool}>减少</button>
                <button onClick={() => this.props.delaySubmit(1000)}>延迟上交</button>
                <button onClick={this.props.addTwice}>提交两把</button>
            </div>
        )
    }
}
ReactDom.render((
    <Provider store={toolStore}>
        <App/>
    </Provider>
), document.getElementById('root'))